<template>
  <div>
    <b>{{state.text}}</b>
    <p>
      {{state.result}}
    </p>
  </div>
</template>

<script setup>
import {onMounted} from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader';
import keyConfig from './mapKeyConfig';
import {reactive,toRefs} from 'vue'
const state = reactive({
  result:{},
  text:'-'
})
const mapLoad = async()=> {
  try {
    window._AMapSecurityConfig = {
      securityJsCode: keyConfig.securityJsCode,
    };

    const AMap = await AMapLoader.load({
      key: keyConfig.key, // 申请好的Web端开发者Key，首次调用 load 时必填（plc-key）
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [
        'AMap.DistrictSearch',
        'AMap.Geocoder',
        'AMap.AutoComplete ', //2.0版本是AMap.AutoComplete，    2.0以下是AMap.Autocomplete
        // 输入提示插件
        'AMap.PlaceSearch', // POI搜索插件
        'AMap.Scale', // 右下角缩略图插件 比例尺
        'AMap.OverView', // 地图鹰眼插件
        'AMap.ToolBar', // 地图工具条
        'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
        'AMap.PolyEditor', // 编辑 折线多，边形
        'AMap.CircleEditor', // 圆形编辑器插件
        'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      ],
    });

    AMap.plugin('AMap.Geolocation',() => {
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true,//是否使用高精度定位，默认:true
        timeout: 10000,          //超过10秒后停止定位，默认：5s
        GeoLocationFirst: true, //默认为false，设置为true的时候可以调整PC端为优先使用浏览器定位，失败后使用IP定位
      });
      //getCurrentPosition 调用此方法可实现打开页面自动定位
      geolocation.getCurrentPosition((status,result)=>{
        console.log(result,"r")
        state.result = result
        if(status === 'complete'){
          state.text='定位成功!'
        }else{
          state.text='定位失败!'
        }
      });
    });

  } catch (e) {
    console.error(e);
  }
}
onMounted(()=>{
  mapLoad()
})
</script>

<style scoped>
.sear-map {
  margin-bottom: 20px;
}
.footer {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/deep/ .el-dialog__body {
  padding: 10px;
}
</style>
